<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>定位</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.Abox {
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 相对定位 */
				position: relative;
				/* top: 100px;
				left: 200px; */
			}

			.Bbox {
				width: 300px;
				height: 300px;
				background-color: deeppink;
				/* 绝对定位  脱标，不在原来位置*/
				position: absolute;
				bottom: 100px;
				right: 100px;
			}
			
			.Cbox{
				width: 50px;
				height: 200px;
				border: 1px solid red;
				position: fixed;
				/* 固定定位 */
				right: 0;
				top: 300px;
			}

			.bigbox {
				/* position: relative; */
				width: 600px;
				height: 600px;
				border: 1px solid red;
			}

			.bigbox .fubox {
				position: absolute;
				width: 400px;
				height: 400px;
				border: 1px solid green;
			}

			.bigbox .fubox .erbox {
				position: absolute;
				bottom: 100px;
				width: 200px;
				height: 200px;
				border: 1px solid black;

			}
		</style>
	</head>
	<body>
		<!-- 定位：position
		 1.相对定位：relative
					1.1 移动时参照点是自己原来的位置
					1.2	不脱标：继续保留原先的位置，不会脱离标准流
					1.3	经典应用：给绝对定位当爹，子绝父相（大相小绝）
					
		 2.绝对定位：absolute
					2.1：移动时参照点时祖先元素的位置
					2.2：没有 祖先元素或 祖先没有定位，则以浏览器为准定位
					2.3：祖先元素有（相对，绝对，固定），则以最近一级有定位（儿子看父亲，父没有看父上一级）
					2.4：脱标：会不再占有原先的位置
		 3.固定定位：fixed
		 
		 4.叠层等级属性：z-index
					4.1：用于调整重叠 定位元素 的堆餮顺序
					4.2：取值：可为正整数，负整数，0
							  默认值为0 ，取值越大，定位元素的叠层元素中越靠前（上）
		 
		5. 边偏移：top:上	bottom:下	left:左	right:右
		 -->

		<!-- 相对定位	绝对定位		固定定位 -->
		<div class="Abox"></div>
		<div class="Bbox"></div>
		<div class="Cbox">售后服务</div>

		<!-- 绝对定位的1.2.3的效果 -->
		<div class="bigbox">
			<div class="fubox">
				<div class="erbox"></div>
			</div>
		</div>
	</body>
</html>